<template lang="html">
  <div id="">
    <!-- <span class="shadow"></span> -->
    <div class="mintPicker">
      <!-- <div class="pickerTop">
        <span class="cancel" @click="cancel">取消</span>
        请选择
        <span class="sure" @click="sure">确定</span>
      </div> -->
      <mt-picker
        :slots="slots"
        :value-key="valueKey"
        @change="onValuesChange">
      </mt-picker>
    </div>
  </div>
</template>

<script>
export default {
  name:'mintPicker',
  data:() => ({
    mintChooseValue:'',       //picker选择的值
    slots:[],
    valueKey:'',
  }),
  mounted() {
    //do something after mounting vue instance
    let that = this;
    network.get(configUrl.GETOTHERFEE_URL,'',function(res){
      console.log(res);
      let dataList = res.dataList;
      that.slots=[{
        flex: 1,
        values:dataList,
        className: 'slot1',
        textAlign: 'center',
        defaultIndex:0,
      }];
      that.mintChooseValue = that.slots[0];
      that.valueKey = dataList.otherFeeName;
    },function(err){
      console.log(err);
    });
  },
  methods:{
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
      console.log(picker.getSlotValue(0));
      this.mintChooseValue = picker.getSlotValue(0);
      this.$emit('mintPickerBtn',{mintChooseValue:this.mintChooseValue})
    },
    // cancel(){
    //   this.$emit('mintPickerBtn',{
    //     mintChooseValue:this.mintChooseValue,
    //     chooseBtn:false,
    //   });
    // },
    // sure(){
    //   this.$emit('mintPickerBtn',{
    //     mintChooseValue:this.mintChooseValue,
    //     chooseBtn:true,
    //   });
    // }
  },
  created(){
    console.log(this.slots);
  }
}
</script>

<style lang="scss" scoped>
@import "@/main.scss";
.shadow{
  position: fixed;
  top: 0; bottom: 0;
  left: 0; right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
}
.mintPicker{
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 3;
  background: white;
  border-top: 1px solid $borderColor;
  // padding-top: 10px;
}
.pickerTop{
  @include flex;
  justify-content: space-around;
  border-bottom: 1px solid $borderColor;
  line-height: 2rem;
  padding: 10px 0;
  .cancel{
    color: $lightColor;
  }
  .sure{
    color: $greenColor;
  }
}
</style>
